<template>
	<view :class="['team',device == 'ios'?'iosPadding':'androidPadding']">
		<view :class="device=='ios'?'ios_pageTitle':'and_pageTitle'">
			<view class="statusBar"></view>
			<view :class="['pageTitle','dFlex','jBetween_aCenter']">
				<view class="backIcon imgPublic" @tap='tool.back()'>
					<image src="../static/images/back.png" mode="widthFix"></image>
				</view>
				<view class="title">我的团队</view>
				<view class="backIcon imgPublic"></view>
			</view>
		</view>
		<view class='userCenter'>
			<view class='userInfo dFlex jStart_aStart '>
				<view class='userTx imgPublic'>
					<image :src="imgDomain + member.image_head"></image>
				</view>
				<view class="otherInfo">
					<view class="identify dFlex jBetween_aCenter">
						<text>{{member.nickName}}</text>
					</view>
					<view class='phone'>{{member.tel}}</view>
				</view>
			</view>
			<view class="tools dFlex jAround_aCenter fWap">
				<view class="toolOne" v-for="(item,index) in spread" :key='index'> 
					<text>{{item.name}}</text>
					<view class="toolNum">{{item.num ? item.num : '0'}}</view>
				</view>
				<!-- <view class="toolOne">
					<text>团队总收益</text>
					<view class="toolNum">￥{{total}}</view>
				</view>
				<view class="toolOne">
					<text>直推云股东</text>
					<view class="toolNum">{{stockholder?stockholder:'0'}}</view>
				</view>
				<view class="toolOne">
					<text>直推VIP</text>
					<view class="toolNum">{{fellow?fellow:'0'}}</view>
				</view> -->
			</view>
		</view>
		<view class="list">
			<view class="kind dFlex jAround_aCenter">
				<view :class="['kindOne',idx == '1'?'active':'']" @click="changeIdx('1')">直推</view>
				<view :class="['kindOne',idx == '2'?'active':'']" @click="changeIdx('2')">团队</view>
			</view>
			<view v-if='list.length'>
				<view class="line dFlex jStart_aCenter" v-for='(item,index) in list' :key='index'>
					<view class="userTx imgPublic">
						<image :src="item.image_head"></image>
					</view>
					<view class="info">
						<view class="phone dFlex jStart_aCenter">
							<text>{{item.tel}}</text>
							<!-- <view class="tagIcon imgPublic">
								<image src="https://wx.gdxixiashi.com/public/images/person/vip2@2x.png" mode="widthFix"></image>
							</view> -->
						</view>
						<view class="identify">{{item.grade_name}}</view>
						<view class="num">ID {{item.memberId}}</view>
					</view>
				</view>
			</view>
			<view class="empty imgPublic" v-else>
				<image src="../static/images/empty.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgDomain:getApp().globalData.imgDomain,
				device:getApp().globalData.platform,
				member:{},
				page:1,
				load:false,
				list:[],
				spread:[],
				// count:0,//总人数
				// stockholder:0,//云股东
				// fellow:0,//直推VIP
				// total:'0.00',//总收益
				idx:'1',//1直推 2团队
			};
		},
		onShow() {
			this.initData();
		},
		onReachBottom() {
			if(this.load){
				this.load = false;
				this.page ++ ;
				this.initData();
			}
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods:{
			changeIdx(idx){
				this.idx = idx;
				this.page = 1;
				this.list = [];
				this.initData();
			},
			initData(){
				this.tool.getData('User/myspread',{
					memberId:uni.getStorageSync('userId'),
					page:this.page,
					type:this.idx,
				}).then(res=>{
					console.log(res);
					if(res){
						if(this.page == '1'){
							this.member = res.member;
							this.spread = res.spread;
							/* this.count = res.count;
							this.total = res.total;
							this.stockholder = res.stockholder;
							this.fellow = res.fellow; */
						}
						this.list = this.page == '1'?res.list:this.list.concat(res.list);
						this.load = res.list.length>=10?true:false;
					}
				}).catch(err=>{
					console.log(err);
				})
			}
		}
	}
</script>

<style lang="scss">
	.team{
		.list{
			width: 90%;
			background: white;
			border-radius: 10px 10px 0 0;
			margin: 0 auto;
			padding: 6px 16px;
			box-sizing: border-box;
			position: relative;
			top: -30px;
			.kind{
				width: 100%;
				background: #F7F8FA;
				border-radius: 5px;
				padding: 5px 4px;
				box-sizing: border-box;
				.kindOne{
					flex: 1;
					text-align: center;
					color: rgba(48, 48, 48, 0.5);
					font-size: 12px;
					padding: 6px 0;
					border-radius: 5px;
				}
				.active{
					background: #1A66FF;
					color: white;
				}
			}
			.line{
				width: 100%;
				padding: 10px 0;
				border-bottom: 1px solid #DDDDDD;
				.info{
					flex:1;
					.num{
						color: #999999;
					}
					.identify{
						margin: 4px 0;
					}
					.phone{
						width: 100%;
						font-size: 16px;
						margin-bottom: 3px;
						.tagIcon{
							width: 23px;
							margin-left: 12px;
						}
					}
				}
				.userTx{
					width: 54px;
					height: 54px;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 12px;
					image{
						height: 100%;
					}
				}
			}
			.line:last-child{
				border: none;
			}
		}
		.userCenter{
			width: 100%;
			padding:12px 4% 0;
			box-sizing:border-box;
			background: linear-gradient(to bottom,#2A45C6,#5B8DE7);
			color: white;
			overflow: hidden;
			.tools{
				width: 90%;
				margin: 10px auto 40px;
				.toolOne{
					width:33%;
					text-align: center;
					font-size: 14px;
					margin-bottom: 10px;
					.toolNum{
						font-size: 22px;
						margin-top: 6px;
						font-weight: bold;
					}
				}
			}
			.userInfo{
				width: 100%;
				.otherInfo{
					flex: 1;
					.identify{
						font-size: 18px;
					}
					.phone{
						font-size: 12px;
						margin-top: 5px;
					}
				}
				.userTx{
					width: 46px;
					height: 46px;
					border-radius: 50%;
					margin-right: 10px;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	.ios_pageTitle,.and_pageTitle{
		color: white;
		background: #2A45C6;
	}
</style>
